<?php if(isset($default_feats)): ?>
	<form method="POST" action="<?php echo url_for('test/index'); ?> ">
	<?php foreach($feats_lists as $layer_name=>$feats_types): ?>
		<h2>Feats types for <?php echo $layer_name; ?> </h2>
		<?php foreach($feats_types as $feats_type=>$feats_names): ?>
			<h3>Choose a default feat for <?php echo $feats_type; ?> : </h3>
			<p>
			<?php $first = true; ?>
			<?php foreach($feats_names as $feat_name=>$feat_values): ?>
				<input type="radio" name="<?php echo $layer_name.'['.$feats_type.']'; ?>" value="<?php echo $feat_name; ?>" 
				<?php if($first === true): ?>
					<?php $first = false; ?>
					checked="checked"
				<?php endif; ?>
				><?php echo $feat_name; ?><br/>
			<?php endforeach; ?>
			</p>
		<?php endforeach; ?>
	<?php endforeach; ?>
	<p>
	<input type="submit" value="ok"/>
	</p>
	</form>
<?php else: ?>
	<?php
	use_javascript('renderer.js'); 
	use_javascript('toolTip.js');
	//use_javascript('displayLayer.js');
	use_javascript('editElement.js');
	//use_javascript('addDeleteElement.js');
	//use_javascript('editSelect.js');
	//use_javascript('editFeatDef.js');
	//use_javascript('Open.js');
	//use_javascript('importMediaProject.js');
	?>

	<script type="text/javascript" language="javascript">
	if(getRenderer())
		  getRenderer().destroy();
	initDisplay('whiteboard');
	var renderer = getRenderer();
	renderer.setSize(10000, 10000);
	var x_pos = 10; 
	var x_max = 0;
	var x_min = 0;
	var y_min = 0;
	var y_max = 0;
	var l = 0;
	var font_size = 15;
	var rect_height = font_size*1.4;
	var y_pos = 70 + parseInt('<?php echo $max_level; ?>')*(100 + rect_height);
	var canvas_width = 1600;
	var canvas_height = (y_pos > 1200) ? y_pos : 1200;
	</script>

	<?php foreach($marks_level[0] as $entity): ?>
		<?php $mark = $entity['element']; ?>
		<?php if($mark->isToken()): ?>
			<?php $text = $mark->getText(); ?>		
			<script type="text/javascript" language="javascript">          
			rect = new Graphic.Rectangle(renderer); 
			rect.setFill({r: 204, g: 204, b: 205, a: 128});
			rect.setStroke({r: color[2]["r"], g: color[2]["g"], b: color[2]["b"], a: 255});
			rect.setRoundCorner(10, 10);
			rect.translate(x_pos, y_pos);
			rect.setID('<?php echo $mark->getAttId(); ?>');
			rect.setTextValue("<?php echo $text; ?>", font_size);
			rect.setTextColor(color[2]["r"],color[2]["g"],color[2]["b"]);
			size = rect.getSize();
			renderer.add(rect);
			x_pos += size['w'] + 10;
			canvas_width = x_pos;
			</script>
		<?php endif; ?>
	<?php endforeach; ?>

	<?php foreach($marks_level[0] as $entity): ?>
		<?php $mark = $entity['element']; ?>
		<?php if(!$mark->isToken()): ?>
			<?php
			if(isset($feats_list[$mark->getPaulaId()], $feats_list[$mark->getPaulaId()][$mark->getAttId()]))
				$text = $feats_list[$mark->getPaulaId()][$mark->getAttId()]->current();
			else
				$text = $mark->getAttId();
			?>	
			<script type="text/javascript" language="javascript">         
			rect = new Graphic.Rectangle(renderer); 
			rect.setFill({r: 204, g: 204, b: 205, a: 128});
			rect.setStroke({r: color[2]["r"], g: color[2]["g"], b: color[2]["b"], a: 255});
			rect.setRoundCorner(10, 10);
			rect.translate(x_pos, y_pos);
			rect.setID('<?php echo $mark->getAttId(); ?>');
			rect.setTextValue("<?php echo $text; ?>", font_size);
			rect.setTextColor(color[2]["r"],color[2]["g"],color[2]["b"]);
			size = rect.getSize();
			x_pos += size['w'] + 10;
			renderer.add(rect);
			canvas_width = x_pos;
			</script>	
		<?php endif; ?>
	<?php endforeach; ?>
	
	<?php if(isset($structs_level[0])): ?>
	<?php foreach($structs_level[0] as $entity): ?>
		<?php $struct = $entity['element']; ?>
		<?php
			if(isset($feats_list[$struct->getPaulaId()], $feats_list[$struct->getPaulaId()][$struct->getAttId()]))
				$text = $feats_list[$struct->getPaulaId()][$struct->getAttId()]->current();
			else
				$text = $struct->getAttId();
		?>
		<script type="text/javascript" language="javascript">
		var dx_pos = 0;
		var dy_pos = 0;               
		rect = new Graphic.Rectangle(renderer);
		rect.setFill({r: 204, g: 204, b: 205, a: 128});
		rect.setStroke({r: color[2]["r"], g: color[2]["g"], b: color[2]["b"], a: 255});
		rect.setRoundCorner(10, 10);
		rect.translate(x_pos, y_pos); 
		rect.setID("<?php echo $struct->getAttId(); ?>");
		rect.setTextValue("<?php echo $text; ?>", font_size);
		rect.setTextColor(color[2]["r"],color[2]["g"],color[2]["b"]);
		size = rect.getSize();
		renderer.add(rect);
		x_pos += size['w'] + 10;
		</script>			
	<?php endforeach; ?>
	<?php endif; ?>



	<script type="text/javascript" language="javascript">
	canvas_width = (x_pos > 1600) ? x_pos : 1600;
	renderer.setSize(canvas_width, canvas_height);
	document.getElementById("whiteboard").style.width = canvas_width.toString()+"px";
	document.getElementById("whiteboard").style.height = canvas_height.toString()+"px";
	</script>
	<?php foreach($marks_level as $level=>$entities): ?>
		<?php foreach($entities as $entity): ?>
			<?php if($entity['level'] != 0):?>
			<?php $mark = $entity['element']; ?>
				<?php
				if(isset($feats_list[$mark->getPaulaId()], $feats_list[$mark->getPaulaId()][$mark->getAttId()]))
					$text = $feats_list[$mark->getPaulaId()][$mark->getAttId()]->current();
				else
					$text = $mark->getAttId();
				?>
				<script type="text/javascript" language="javascript">         
				rect = new Graphic.Rectangle(renderer); 
				rect.setFill({r: 204, g: 204, b: 205, a: 128});
				rect.setStroke({r: color[2]["r"], g: color[2]["g"], b: color[2]["b"], a: 255});
				rect.setRoundCorner(10, 10);
				rect.translate(x_pos, y_pos);
				rect.setID('<?php echo $mark->getAttId(); ?>');
				rect.setTextValue("<?php echo $text; ?>", font_size);
				rect.setTextColor(color[2]["r"],color[2]["g"],color[2]["b"]);
				size = rect.getSize();
				x_pos += size['w'] + 10;
				renderer.add(rect);
				</script>
			<?php endif; ?>
		<?php endforeach; ?>
	<?php endforeach; ?>
	
	<?php foreach ($structs_level as $level=>$entities):?>
		<?php foreach($entities as $entity): ?>
			<?php if($entity['level'] != 0): ?>	
				<?php $struct = $entity['element']; ?>
				<?php
					if(isset($feats_list[$struct->getPaulaId()], $feats_list[$struct->getPaulaId()][$struct->getAttId()]))
						$text = $feats_list[$struct->getPaulaId()][$struct->getAttId()]->current();
					else
						$text = $struct->getAttId();
				?>			
				<script type="text/javascript" language="javascript">
				var dx_pos = 0;
				var dy_pos = 0;               
				rect = new Graphic.Rectangle(renderer);
				rect.setFill({r: 204, g: 204, b: 205, a: 128});
				rect.setStroke({r: color[2]["r"], g: color[2]["g"], b: color[2]["b"], a: 255});
				rect.setRoundCorner(10, 10);
				rect.translate(x_pos, y_pos); 
				rect.setID("<?php echo $struct->getAttId(); ?>");
				rect.setTextValue("<?php echo $text; ?>", font_size);
				rect.setTextColor(color[2]["r"],color[2]["g"],color[2]["b"]);
				size = rect.getSize();
				renderer.add(rect);
				x_pos += size['w'] + 10;
				</script>
			<?php endif; ?>
		<?php endforeach; ?>	
	<?php endforeach; ?>

	<?php
	$marks_level->rewind();
	$structs_level->rewind();
	?>




	<?php foreach($marks_level as $level=>$entities): ?>
		<?php foreach($entities as $mark): ?>
			<?php if($mark['level'] != 0):?>
				<script type="text/javascript" language="javascript">
					var first = true;
					rect = renderer.get("<?php echo $mark['element']->getAttId(); ?>");
				</script>	
				<?php foreach ($mark['sons'] as $son): ?>			
					<script type="text/javascript" language="javascript">
					var rectTo = renderer.get("<?php echo $son['son']->getAttId(); ?>");
					if(first === true)
					{
						first = false;
						init_y_pos = rectTo.getMatrix()['dy'];
						y_min = init_y_pos;
						y_max = init_y_pos;
						x_min = rectTo.getMatrix()['dx'];
						x_max = rectTo.getMatrix()['dx'] + rectTo.getSize()['w'];		
					}
					end_y_pos = rectTo.getMatrix()['dy'];
					if(end_y_pos < y_min)
						y_min = end_y_pos;
					if(end_y_pos > y_max)
						y_max = end_y_pos;
					if((rectTo.getMatrix()['dx'] + rectTo.getSize()['w'])>x_max)
						x_max = rectTo.getMatrix()['dx'] + rectTo.getSize()['w']; 
					var line = new Graphic.Line(renderer); 
					line.setPoints(rect.getMatrix()["dx"]+rect.getSize()["w"]/2
						, rect.getMatrix()["dy"]+rect.getSize()["h"]
						, rectTo.getMatrix()["dx"]+rectTo.getSize()["w"]/2
						, rectTo.getMatrix()["dy"]);
					line.setStroke({r: color[2]["r"], g: color[2]["g"], b: color[2]["b"], a: 128, w: 2});
					line.setID("l"+l)
					l +=1 ; 
					line.setFrom(rect.getID());
					line.setTo(rectTo.getID());
					rect.addLineFrom(line.getID(),rectTo.getID());
					rectTo.addLineTo(line.getID(),rect.getID());
					renderer.add(line);
					renderer.moveToBack(line);
					</script>			
				<?php endforeach; ?>		
				<script type="text/javascript" language="javascript">
				rect.setPosition((x_min + x_max - rect.getSize()['w'])/2 , y_max - (100 + rect_height));
				</script>		
			<?php endif; ?>
		<?php endforeach; ?>
	<?php endforeach; ?>

	<?php foreach ($structs_level as $level=>$entities):?>
		<?php foreach($entities as $struct): ?>
			<?php if($struct['level'] != 0): ?>	
				<?php $paula_id = $struct['element']->getPaulaId(); ?>	
				<script type="text/javascript" language="javascript">
				var first = true;
				rect = renderer.get("<?php echo $struct['element']->getAttId(); ?>");
				</script>	
				<?php foreach ($struct['sons'] as $son): ?>		
					<?php
					$rel_id = $son['rel_id'];
					if(isset($feats_list[$paula_id], $feats_list[$paula_id][$rel_id]))
						$link_text = $feats_list[$paula_id][$rel_id]->current();
					else
						$link_text = '';
					?>		
					<script type="text/javascript" language="javascript">
					var rectTo = renderer.get("<?php echo $son['son']->getAttId(); ?>");
					if(first === true)
					{
						first = false;
						init_y_pos = rectTo.getMatrix()['dy'];
						y_min = init_y_pos;
						y_max = init_y_pos;
						x_min = rectTo.getMatrix()['dx'];
						x_max = rectTo.getMatrix()['dx'] + rectTo.getSize()['w'];		
					}
					end_y_pos = rectTo.getMatrix()['dy'];
					if(end_y_pos < y_min)
						y_min = end_y_pos;
					if(end_y_pos > y_max)
						y_max = end_y_pos;
					if((rectTo.getMatrix()['dx'] + rectTo.getSize()['w'])>x_max)
						x_max = rectTo.getMatrix()['dx'] + rectTo.getSize()['w']; 
			
				  var line = new Graphic.Line(renderer); 
					line.setPoints(rect.getMatrix()["dx"]+rect.getSize()["w"]/2
						, rect.getMatrix()["dy"]+rect.getSize()["h"]
						, rectTo.getMatrix()["dx"]+rectTo.getSize()["w"]/2
						, rectTo.getMatrix()["dy"]);
				  line.setStroke({r: color[2]["r"], g: color[2]["g"], b: color[2]["b"], a: 128, w: 2});
				  line.setID("l"+l)
				  l +=1 ; 
				  line.setFrom(rect.getID());
				  line.setTo(rectTo.getID());
				  line.setText("<?php echo $link_text; ?>", color[2]["r"], color[2]["g"], color[2]["b"]);
				  rect.addLineFrom(line.getID(),rectTo.getID());
				  rectTo.addLineTo(line.getID(),rect.getID());
				  renderer.add(line);
				  renderer.moveToBack(line);
					</script>		
				<?php endforeach; ?>
				<script type="text/javascript" language="javascript">
				rect.setPosition((x_min + x_max - rect.getSize()['w'])/2 , y_min - (100 + rect_height));
				</script>
			<?php endif; ?>
		<?php endforeach; ?>	
	<?php endforeach; ?>
	

	
<?php endif; ?>


